<template>
  <view class="trip-list">
    <view class="list">
      <view class="item" v-for="(item, index) in invoiceList">
        <view class="header">
          <view class="electronic-invoice">{{ electronicInvoice }}</view>
          <view class="status"> {{ alreadyInvoice }}</view>
        </view>

        <view class="top">
          <view class="top-s">
            <view class="firm-name">{{ item.firmName }}</view>
          </view>
          <view class="header-two">
            <view class="firm-code">{{ invoiceCode }}&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;{{
                invoiceNumber
              }}
            </view>
          </view>
          <view class="header-three">
            <view class="header-invoice-three">{{ item.firmCode }}</view>
          </view>
          <view class="header-invoice-liu">{{ item.phone }}</view>

          <view class="header-four">
            <view class="start">{{ item.allPrice }}元</view>
          </view>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
import {historyList, listMassage, saveMassage} from "@/api/invoice"

export default {

  data() {
    return {
      electronicInvoice: '电子发票',
      alreadyInvoice: '已开票',
      invoiceCode: '发票代码',
      invoiceNumber: '发票号码',
      invoiceList: [],
      index: 0
    }
  },
  onLoad() {
    this.historyList();
  },
  filters: {
    format(value, arg) {
      function dateFormat(date, format) {
        if (typeof date === 'string') {
          var mts = date.match(/(\/Date\((\d+)\)\/)/)
          if (mts && mts.length >= 3) {
            date = parseInt(mts[2])
          }
        }
        date = new Date(date)
        if (!date || date.toUTCString() == 'Invalid Date') {
          return ''
        }
        var map = {
          'M': date.getMonth() + 1, //月份
          'd': date.getDate(), //日
          'h': date.getHours(), //小时
          'm': date.getMinutes(), //分
          's': date.getSeconds(), //秒
          'q': Math.floor((date.getMonth() + 3) / 3), //季度
          'S': date.getMilliseconds() //毫秒
        }
        format = format.replace(/([yMdhmsqS])+/g, function (all, t) {
          var v = map[t]
          if (v !== undefined) {
            if (all.length > 1) {
              v = '0' + v
              v = v.substr(v.length - 2)
            }
            return v
          } else if (t === 'y') {
            return (date.getFullYear() + '').substr(4 - all.length)
          }
          return all
        })
        return format
      }

      return dateFormat(value, arg)

    }
  },
  methods: {
    historyList() {
      historyList().then(res => {
        console.log(res.rows)
        this.invoiceList = res.rows
      })
    }
  }
}
</script>
<style lang="scss">
page {
  background-color: #f5f6f7;

  .list {

    .item {
      background: #fff;
      border-radius: 20px;
      margin-top: 24px;
      height: 140px;

      .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px;

        .electronic-invoice, {
          font-size: 14px;
          color: #25DEDE;
        }

        .status, {
          color: #999;
          font-size: 15px;
        }
      }

      .header-four {
        display: flex;
        justify-content: space-between;
        padding: 12 rpx;
        margin-top: -20px;
        float: right;

        .start {
          font-size: 20px;
        }
      }

      .header-two {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12 rpx;
        margin-top: 10px;
        margin-left: 5px;

        .firm-code {
          font-size: 12px;
          color: #999;
        }
      }

      .header-three {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12 rpx;
        margin-top: 10px;
        margin-left: 5px;

        .header-invoice-three {
          font-size: 12px;
          color: #999;
        }

      }

      .header-invoice-liu {
        font-size: 12px;
        color: #999;
        margin-left: 147px;
        margin-top: -14px;
      }

      .top {
        margin-top: 16 rpx;

        .top-s {
          display: flex;
          //justify-content: space-between;
          align-items: center;
          padding: 3px;


          .firm-name {
            font-size: 15px;
          }

          .price {
            font-size: 14px;
            color: #2f2d2d;
            margin-left: 160px;
          }
        }


        .s1 {
          font-size: 50px;
          color: #21dd71;
          margin-right: 10px;
        }

        .s2 {
          font-size: 50px;
          color: #f34c05;
          margin-right: 10px;
        }
      }


    }
  }
}

.trip-list {
  display: flex;
  flex-direction: column;
  gap: 16 rpx;
}

</style>

